<template>
	<div class="movie">
		<!--头部信息-->
		<div class="movietop">
			<!--<div class="movietop" :style="res(img)">-->

			<img :src="re(detailMovie.img)" alt="电影图片" class="blur" />
			<div class="rn clearfix">
				<img :src="re(detailMovie.img)" class="fl" />
				<h3>{{detailMovie.nm}}</h3>
				<p>{{detailMovie.enm}}</p>
				<p v-if="detailMovie.sc!=0"><span>{{detailMovie.sc}}</span>({{detailMovie.snum}}人评)</p>
				<p v-if="detailMovie.sc==0">暂无评分</p>
				<p>{{detailMovie.cat}}</p>
				<p>{{detailMovie.fra}}/{{detailMovie.dur}}分钟</p>
				<p>{{detailMovie.pubDesc}}</p>
			</div>

		</div>
		<div class="lunbo">

			<swiper :options="swiperOption">
				<swiper-slide v-for="(item,index) in dayarr">
					<div class="day" @click="getday(item)">
						<span v-if="index==0">今天</span>
						<span v-if="index==1">明天</span>
						<span v-if="index==2">后天</span> {{item}}
					</div>
				</swiper-slide>

			</swiper>

		</div>
		
		<div class="loading clearfix" v-show="show">
			<mt-spinner :type="3" size="50" color="#999" class="fl"></mt-spinner>
		</div>
		<ul class="moviehead" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading">
			<li v-for="item in cinemas" class="clearfix" @click="toshows(id,item.id)" v-show="shows">
				<div class="left fl">
					<p class="p1">
						{{item.nm}}<span>{{item.sellPrice}}</span><span>元起</span>
					</p>
					<p class="p2">
						{{item.addr}}
					</p>
					<div v-if="item.promotion.cardPromotionTag" class="p3">
						<div class="car" v-if="item.promotion.cardPromotionTag">卡</div><span>{{item.promotion.cardPromotionTag}}</span></div>

				</div>
				<div class="right fr">
					{{item.distance}}
				</div>
			</li>
		</ul>
		<div class="loading2 clearfix" v-show="loading">
			<mt-spinner :type="3" size="50" color="#999" class="fl"></mt-spinner>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	var d;
	var day;
	var year;
	var moth;
	var week;
	var day1;
	var moth1;
	var dayarr = [];
	for(let i = 0; i < 10; i++) {
		d = new Date();
		d.setTime(d.getTime() + (i * (24 * 60 * 60 * 1000)));
		day = d.getDate();
		year = d.getFullYear();
		moth = d.getMonth() + 1;
		week = d.getDay();
		day1;
		moth1;
		//		console.log(week);
		if(day < 10) {
			day1 = '0' + day;
		} else {
			day1 = day;
		}
		if(moth < 10) {
			moth1 = '0' + moth;
		} else {
			moth1 = moth;
		}
		dayarr[i] = year + '-' + moth1 + '-' + day1
	}

	export default {
		created() {
//			this.showlo = true
			let self = this;
			self.loading = true;
			this.show = false;
			this.$route.query.movieid;

			this.id = this.$route.query.movieid
			this.axios.get('/ajax/detailmovie?movieId=' + this.id).then((res) => {
//				self.showlo = false;
				console.log(res)
				this.detailMovie = res.data.detailMovie
				//提交修改
				this.$store.commit('changeHT', this.detailMovie.nm)
				console.log('data', this.detailMovie)
				self.loading = false;
				
			})

		},
		data() {
			return {
				show: true,
				shows: true,
				showlo:false,
				id: '',
				detailMovie: [],
				cinemas: [],
				offset: 0,
				limit: 0,
				falg: true,
				dayarr: dayarr,
				day: dayarr[0],
				loading:true,
				swiperOption: {
					slidesPerView: 'auto',
					spaceBetween: 0,
					//					centeredSlides: true,

					pagination: {
						el: '.swiper-pagination',
						clickable: true

					}
				}
				//				tiem: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods: {
			re(img) {
				if(typeof img == 'string') {

					return img.replace('w.h', '128.180');
				}
			},
			loadMore() {
				if(this.loading === false){
					
				this.loading = true
				this.limit += 20;
				this.axios.post('/ajax/movie', qs.stringify({
					movieid: this.id,
					day: this.day,
					offset: this.offset,
					limit: this.limit,
					districtId: -1,
					lineId: -1,
					hallType: -1,
					brandId: -1,
					serviceId: -1,
					areaId: -1,
					stationId: -1,
					item: "",
					updateShowDay: true,
					reqId: 1545893421426,
					cityId: 20,
				})).then((res) => {
					this.loading = false 
					console.log(res)
					console.log(res.data.cinemas.length)
					if(res.data.cinemas.length > 0) {
						this.cinemas = res.data.cinemas
					}

					console.log(this.cinemas)
				})
				}
			},
			toshows(mId, cId) {
				this.limit = 0;
				this.$router.push({
					name: 'shows',
					query: {
						movieId: mId,
						cinemaId: cId
					}
				})
			},
			getday(item) {
				this.loading = true;
				this.shows = false;
				this.day = item;
				console.log(this.day)
				this.axios.post('/ajax/movie', qs.stringify({
					movieid: this.id,
					day: this.day,
					offset: this.offset,
					limit: 20,
					districtId: -1,
					lineId: -1,
					hallType: -1,
					brandId: -1,
					serviceId: -1,
					areaId: -1,
					stationId: -1,
					item: "",
					updateShowDay: true,
					reqId: 1545893421426,
					cityId: 20,
				})).then((res) => {
					this.shows = true;
					console.log(res)
					console.log(res.data.cinemas.length)
					if(res.data.cinemas.length > 0) {
						this.cinemas = res.data.cinemas
					}

					console.log(this.cinemas)
					this.loading = false;
				})
				this.$forceUpdate()
			},

		},
	}
</script>

<style lang="scss" scoped="scoped">
	@import url("../scss/movie.scss");
	.day {
		width: 120px;
		height: 40px;
		border-bottom: 2px solid red;
		text-align: center;
		font-size: 20px;
		line-height: 40px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.lunbo {
		position: absolute;
		top: 150px;
		/*height: 50px;*/
		width: 100%;
		/*width: 100px;*/
		z-index: 0;
	}
	
	.swiper-slide {
		width: 140px;
	}
	
	.loading {
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 140px;
		height: 20px;
	}
	.loading,
	.loading2 {
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		height: 20px;
		bottom: 0;
	}
	.loading3{
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		height: 20px;
		top: 160px;
	}
</style>